<template>
  <view class="content">
    <view class="map">
      <map
        show-compass
        :latitude="latitude"
        :longitude="longitude"
        :markers="markers"
      >
      </map>
    </view>
    <view class="body">
      <view class="con">
        <view class="info">
          <label>报警时间</label>
          <text>{{ alermInfo.time }}</text>
        </view>
        <view class="info">
          <label>报警原因</label>
          <text>{{ alermInfo.cause }}</text>
        </view>
        <view class="info">
          <label>报警等级</label>
          <text>{{ getLevel }}</text>
        </view>
        <view class="info">
          <label>蜂鸣器当前状态</label>
          <switch
            type="switch"
            color="aquamarine"
            :checked="!alermInfo.on_buzzer"
            @change="change"
          ></switch>
        </view>
      </view>
    </view>
    <view class="bottom">
      <view class="btn">
        <button @click="signOut">退出报警模式</button>
      </view>
    </view>
  </view>
</template>

<script>
// 引入请求模块
import { postRequest, postAlarmStatus } from "@/api/api.js";
// 引入url
import {
  changeBuzStatus,
  changeAlertStatus,
  alarmMonitor,
  alarmRecode,
} from "@/api/request.js";

export default {
  name: "alerm",
  onLoad(value) {
    if (value) {
      this.alermInfo = JSON.parse(value.alermInfo);
      console.log(this.alermInfo);
      this.latitude = this.alermInfo.latitude;
      this.longitude = this.alermInfo.longitude;
      this.markers[0].longitude = this.alermInfo.longitude;
      this.markers[0].latitude = this.alermInfo.latitude;
    }
  },
  data() {
    return {
      alermInfo: {},
      latitude: 0,
      longitude: 0,
      markers: [
        {
          id: 0,
          latitude: 24.10014,
          longitude: 115.25984,
          iconPath: "/static/icon/pos.png",
          width: 20,
          height: 20,
          callout: {
            content: "报警地点",
            color: "#ffffff",
            fontSize: 16,
            textAlign: "center",
            bgColor: "#fc2f2f",
            borderRadius: 10,
            padding: 15,
            display: "ALWAYS",
          },
        },
      ],
      on_buzzer: {
        datastreams: [{ id: "on_buzzer", datapoints: [{ value: 0 }] }],
      },
      off_buzzer: {
        datastreams: [{ id: "on_buzzer", datapoints: [{ value: 1 }] }],
      },
      status: {
        datastreams: [{ id: "status", datapoints: [{ value: 1 }] }],
      },
    };
  },
  methods: {
    // 修改蜂鸣器状态
    async change(event) {
      const that = this;
      console.log(event);
      if (!event.target.value) {
        uni.showModal({
          title: "提醒",
          content: "当前设备正受到破坏，确定关闭蜂鸣器",
          success: async (res) => {
            if (res.confirm) {
              that.alermInfo.on_buzzer = 1;
              // const result = await postRequest(changeBuzStatus, that.alermInfo);
              const result = await postAlarmStatus(
                alarmMonitor,
                that.off_buzzer
              );
              if (result[1].data.errno == 0) {
                uni.showToast({
                  icon: "success",
                  title: "蜂鸣器已关闭!",
                  duration: 2000,
                });
              } else {
                uni.showToast({
                  icon: "error",
                  title: "服务器连接失败，请稍后再试！",
                  duration: 2000,
                });
              }
              console.log(result);
            } else if (res.cancel) {
              console.log("用户点击取消");
            }
          },
        });
      } else {
        that.alermInfo.on_buzzer = 0;
        // const result = await postRequest(changeBuzStatus, that.alermInfo);
        const result = await postAlarmStatus(alarmMonitor, that.on_buzzer);
        if (result[1].data.errno == 0) {
          uni.showToast({
            icon: "success",
            title: "蜂鸣器已开启!",
            duration: 2000,
          });
        } else {
          uni.showToast({
            icon: "error",
            title: "服务器连接失败，请稍后再试！",
            duration: 2000,
          });
        }
      }
    },
    // 退出警报模式
    async signOut() {
      console.log(this.alermInfo);
      const res = await postRequest(alarmRecode, this.alermInfo);
      console.log(res);
      // const result = await postRequest(changeAlertStatus, this.alermInfo);
      const result = await postAlarmStatus(alarmMonitor, this.status);
      if (result[1].data.errno == 0) {
        uni.switchTab({
          url: "/pages/index/index",
          success() {
            uni.showToast({
              icon: "none",
              title: "报警详情可在报警记录中查看！",
              duration: 2000,
            });
          },
          fail: (err) => {
            console.log(err);
          },
        });
      } else {
        uni.showToast({
          icon: "error",
          title: "服务器连接失败，请稍后再试！",
          duration: 2000,
        });
      }
    },
  },
  computed: {
    // 报警等级
    getLevel() {
      if (this.alermInfo.level == 3) {
        return "高级";
      } else if (this.alermInfo.level == 2) {
        return "中等";
      } else {
        return "低等";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  .map {
    map {
      width: 100%;
      height: 50vh;
    }
  }
  .body {
    margin: 30rpx 20rpx;
    .con {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      .info {
        width: 90%;
        height: 8vh;
        display: flex;
        justify-content: space-between;
        align-items: center;
        label {
          // padding: 0 20rpx;
          width: 35%;
          text-align: center;
          color: #595959;
          font-weight: bold;
        }
        text {
          width: 65%;
          text-align: center;
          color: rgb(255, 0, 0);
          font-size: 34rpx;
          font-weight: bold;
        }
        switch {
          width: 60%;
          text-align: center;
        }
      }
    }
  }
  .bottom {
    height: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
    .btn {
      width: 90%;

      button {
        color: rgb(82, 26, 9);
        font-weight: bold;
        letter-spacing: 4rpx;
        border-radius: 20rpx;
      }
    }
  }
}
</style>